---
title: "文本换行"
# description: "Utilities for controlling word breaks in an element."
description: "用于控制元素中的换行符的功能类。"
---

import plugin from 'tailwindcss/lib/plugins/wordBreak'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## Normal

<!-- Use `break-normal` to only add line breaks at normal word break points. -->
使用 `break-normal` 只在正常的换行点添加换行符。

```html lightBlue
<template preview>
  <p class="break-normal max-w-xs px-6 py-4 mx-auto bg-light-blue-200 text-light-blue-500 font-medium rounded-lg">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum.
  </p>
</template>

<p class="**break-normal** ...">...</p>
```

## Break Words

<!-- Use `break-words` to add line breaks mid-word if needed. -->
如果需要的话，可以使用 `break-words` 在词中间添加换行符。

```html amber
<template preview>
  <p class="break-words max-w-xs px-6 py-4 mx-auto bg-amber-200 text-amber-500 font-medium rounded-lg">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum.
  </p>
</template>

<p class="**break-words** ...">...</p>
```

## Break All

<!-- Use `break-all` to add line breaks whenever necessary, without trying to preserve whole words. -->
使用 `break-all` 在必要的时候添加换行符，而不是试图保留整个单词。

```html emerald
<template preview>
  <p class="break-all max-w-xs px-6 py-4 mx-auto bg-emerald-200 text-emerald-500 font-medium rounded-lg">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum.
  </p>
</template>

<p class="**break-all** ...">...</p>
```

<!-- ## Responsive

To control the word breaks in an element only at a specific breakpoint, add a `{screen}:` prefix to any existing word break utility. For example, adding the class `md:break-all` to an element would apply the `break-all` utility at medium screen sizes and above. -->

## 响应式

要控制一个元素中的换字符只在特定的断点处，可以在任何现有的换字符功能类中添加 `{screen}:` 前缀。例如，在元素中添加 `md:break-all` 类，就可以在中等尺寸以上的屏幕上使用` break-all` 功能类。

```html
<p class="break-normal **md:break-all** ...">
  <!-- ... -->
</p>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看[响应式设计](/docs/responsive-design)文档。

<!-- ## Customizing -->

## 自定义 

<!-- ### Variants -->

### 变体

<Variants plugin="wordBreak" />

<!-- ### Disabling -->
### 禁用

<Disabling plugin="wordBreak" />
